$(function(){
  const form = layui.form
  initArtCateList();
  const layer = layui.layer
// 获取文章分类的列表
function initArtCateList(){
  $.ajax({
    method:`GET`,
    url:`/my/article/cates`,
    success:function(res){
      const htmlStr = template(`tpl-table`,res)
      $(`tbody`).html(htmlStr)
    }
  })
}

//设置弹出层
$(`#btnAdd`).on(`click`,function(){
  layer.open({
  type:1,
  title:`添加`,

  area:[`500px`,`300px`],
  content: $('#dialog-add').html(),
  })
})

// 通过代理的形式 为form-add 表单绑定submit事件

$(`body`).on(`submit`,`#form-add`,function(e){
  e.preventDefault();
  // console.log(`ok`);
 $.ajax({
   method:`POST`,
   url:`/my/article/addcates`,
   data: $(this).serialize(),
   success:function(res){
     if(res.status !==0){
       return layer.msg(`新增分类失败!`)
     }
     initArtCateList();
     layer.msg(`新增分类成功!`)
      // 根据索引,关闭对应的弹出层
      layer.close(indexAdd)
   }
 })

   // 为添加类别按钮绑定点击事件
   let indexAdd = null
   $('#btnAddCate').on('click', function() {
     indexAdd = layer.open({
       type: 1,
       area: ['500px', '250px'],
       title: '添加文章分类',
       content: $('#dialog-add').html()
     })
   })
 })

 // 通过代理的形式 为 btn-edit表单绑定点击事件
 let indexEdit = null
$('tbody').on('click', '.btn-edit', function() {
  // console.log(1);
  // 弹出一个修改文章分类信息的层
  indexEdit = layer.open({
    type: 1,
    area: ['500px', '250px'],
    title: '修改文章分类',
    content: $('#dialog-edit').html()
  })

  const id = $(this).attr('data-id')
console.log(id);
// 发起请求获取对应分类的数据
$.ajax({
  method: 'GET',
  url: '/my/article/cates/' + id,
  success: function(res) {
    form.val('form-edit', res.data)
  }
})
})



// 通过 事件委派 的方式，给修改按钮绑定点击事件
// 监听表单的submit事件
$(`body`).on(`submit`,`#form-edit`,function(e){
  // 阻止默认提交行为
  e.preventDefault();
  // 发起ajax请求 当前表单数据提交
  $.ajax({
    method:`POST`,
    url:`./my/article/updatecate`,
    data:$(this).serialize(),
    success:function(res){
      if(res.status !==0){
      return layer.msg('更新分类数据失败！')
      }
      // 重新获取分类数据
      layer.msg('更新分类数据成功！')
      layer.close(indexEdit)
      // 关闭弹出层
      initArtCateList()
    }
  })
})


// 通过代理的形式，为删除按钮绑定点击事件
 $(`tbody`).on(`click`,`.btn-delete`,function(){
   console.log(123);
   const id = $(this).attr(`data-id`)
   // 提示用户是否要删除
   layer.confirm(`确认删除?`,{ icon: 3, title: '提示' },function(index){
     $.ajax({
       method:`GET`,
       url:'./my/article/deletecate/' + id,
       success:function(res){
         if(res.status!==0){
           return layer.msg(`删除分类失败！`)
         }
         layer.msg('删除分类成功！')
         layer.close(index)
         initArtCateList();
       }
     })
   })
 })
})